<template>
  <div class="home-swipe">
    <van-search v-model="search" placeholder="请输入搜索关键词" shape="round" input-align="center" @search="onSearch"
      @focus="onFocus" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bannerData" :key="index">
        <!-- <img :src="item.picUrl" alt=""> -->
        <van-image lazy-load :src="item.picUrl" radius="20"/>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import { Toast } from 'vant'

export default {
  data() {
    return {
      search: '',
      bannerData: []
    }
  },
  methods: {
    //完成一个方法，实现网络请求轮播数据的功能
    getBanner() {
      // axios.get("/api/recommend/banner")
      // .then(response => {
      //   console.log(response)
      //   let resData = response.data
      //   if(resData.result == 100){
      //     this.bannerData = resData.data
      //   }
      // })
      // .catch(function (error) {
      //   console.log(error)
      // })
      this.$request('get', '/recommend/banner')
        .then(res => {
          // console.log(res);
          if (res.result == 100) {
            this.bannerData = res.data
          }
        })
    },
    onSearch(val) {
      Toast(val)
    },
    onFocus() {
      Toast('搜索框获得焦点')
    }
  },
  created() {
    //页面还没有渲染，目前还不了解网页中有那些元素.....获取“home-swipe”是不可以的
    this.getBanner()//由于是网络请求，有延迟，所以不管getBanner方法中是否操作了template中的元素，都可以在此调用
  },
  mounted() {
    //页面已完成渲染，已经知道有那些网页元素.....获取“home-swipe”是可以的
    // this.getBanner()
  }
}
</script>

<style scoped>
/* .my-swipe .van-swipe-item img {
  width: 100%;
} */
</style>